<template>
  <!-- 1数学几何计算/1三维向量Vector3/ -->
  <div @mousemove="aaa" @click="clickObj" id="webgl" class="main"></div>
  <div class="gdpTag" id="tag">
    <span id="name"></span>
    <br />
    <span id="gdp"></span>
  </div>
  <div class="gdpTag" id="cityName"></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { renderer, css3Renderer, css2Renderer } from "./RenderLoop.js";
import { camera } from "./RendererCamera.js";
import { scene } from "./scene/index.js";
import {
  meshGroup,
  pillarMeshGroup,
  coneMesh,
  curveLine,
  disposeGroup,
} from "./scene/mesh.js";
import { tag } from "./tag3D.js";
import * as THREE from "three";
var width = window.innerWidth;
var height = window.innerHeight;
window.onresize = function () {
  width = window.innerWidth;
  height = window.innerHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
  // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
  // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
  camera.updateProjectionMatrix();
};
var GDP = ref("");
var name = ref("");
var lengzhu = null;
var chooseMesh = null; // 选中的mesh
var cone = null; // 棱锥
var guangquan = null; //选中的光圈
const loader = new THREE.FileLoader();
loader.setResponseType("json");
var JSONData = [];
loader.load("/china2.json", (data) => {
  JSONData = data.features;
});
var lineArr = new THREE.Group();
const clickObj = (event) => {
  const px = event.offsetX;
  const py = event.offsetY;
  //屏幕坐标px、py转WebGL标准设备坐标x、y
  //width、height表示canvas画布宽高度
  const x = (px / width) * 2 - 1;
  const y = -(py / height) * 2 + 1;
  //创建一个射线投射器`Raycaster`
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
  const intersects = raycaster.intersectObjects(meshGroup.children);
  if (intersects.length > 0 && intersects[0].object.name) {
    if (chooseMesh) {
      // 将上一个选中的省份颜色还原
      chooseMesh.color.set(0x004444);
    }
    // 选中省份颜色
    intersects[0].object.material.color.set(0x006666);
    // 将选中的省份赋值给chooseMesh
    chooseMesh = intersects[0].object.material;
    name.value = intersects[0].object.name;
    GDP.value = intersects[0].object.GDP;
    // 将上一个选中的省份棱柱还原
    if (lengzhu) {
      pillarMeshGroup.add(lengzhu);
    }
    // 删除选中省份的棱柱
    lengzhu = pillarMeshGroup.getObjectByName(name.value + "棱柱");
    pillarMeshGroup.remove(lengzhu);
    // 移除上一个标签
    scene.remove(label);
    label = tag(name.value + "GDP");
    // 将标签的位置设置为选中的省份的位置(偏移一点)
    label.position.set(
      intersects[0].object.lngLat[0],
      intersects[0].object.lngLat[1],
      2
    );
    label.scale.set(0.05, 0.05, 0.05);
    scene.add(label);
    // 移除上一个选中省份的棱锥
    if (cone) {
      scene.remove(cone);
    }
    //选中的省份添加棱锥
    cone = coneMesh(intersects[0].object.name, intersects[0].object.lngLat);
    scene.add(cone);
    // 将上一个选中的光圈还原
    if (guangquan) {
      guangquan.position.z = 1 + Math.random();
    }
    // 选中的光圈
    guangquan = scene.getObjectByName(intersects[0].object.name + "光圈");
    // 将选中的光圈移到棱锥的中间
    guangquan.position.z = 2.2;
    disposeGroup(lineArr);
    JSONData.forEach((item) => {
      if (!item.properties.center) {
        return;
      }
      const pathLine = curveLine(
        intersects[0].object.lngLat,
        item.properties.center,
        (Math.random() * 70).toFixed(0)
      );
      lineArr.add(...pathLine);
    });
    scene.add(lineArr);
  } else {
    // 清空飞线
    disposeGroup(lineArr);
    // 移除标签
    scene.remove(label);
    // 移除棱锥
    scene.remove(cone);
    // 将上一个选中的省份光圈还原到原来位置
    if (guangquan) {
      guangquan.position.z = 1 + Math.random();
    }
    if (chooseMesh) {
      // 将上一个选中的省份棱柱还原
      pillarMeshGroup.add(lengzhu);
      // 将上一个选中的省份颜色还原
      chooseMesh.color.set(0x004444);
    }
  }
};
var label = null;
onMounted(() => {
  document.getElementById("webgl").appendChild(renderer.domElement);
  document.getElementById("webgl").appendChild(css3Renderer.domElement);
  document.getElementById("webgl").appendChild(css2Renderer.domElement);
});
</script>
<style scoped lang="less">
.gdpTag {
  padding: 5px 10px;
  font-size: 16px;
  position: absolute;
  background-color: rgba(25, 25, 25, 0.2);
  border-radius: 5px;
  color: #fff;
}
</style>